<template>
<!-- 商城路由 -->
  <div class="menuNav" v-if="indexList">
      <van-nav-bar title="菜谱" left-arrow 
        @click-left="onClickLeft" 
        @click-right="onClickRight"
        :fixed="true"
        :placeholder="true"
    >
        <template #right>
            <van-icon name="search" size="20" />
        </template>
        <template #left>
            <van-icon name="arrow-left" size="20"/>
        </template>
     </van-nav-bar>

    <div class="scorll">
        <van-index-bar :index-list="indexList" :sticky="false" highlight-color="#2a2a2a">
            <div v-for="item in lists" :key="item.id">
                <van-index-anchor :index="item.name" >{{item.name}}</van-index-anchor>
                <div class="cell">
                    <div v-for="i in item.cs" :key="i.id" class="button" >
                        <van-cell :title="i.name" @click="toNavSearch(i.name)"/>
                    </div>
                </div>
            </div>


            
        </van-index-bar>
    </div>
  </div>
</template>

<script>
import { getMenuNav } from "@/apis/index";
export default {
  name: 'ShopMall',
  data() {
    return {
      indexList: null,
      lists: null,
    //   activeKey: 0,
    };
  },
  components: {
    // HelloWorld
  },
  created: async function () {
        this.lists = (await getMenuNav()).data.result.cs;
        this.indexList = await this.lists.map( item => `${item.name}`);
    },

  methods:{
    toNavSearch(name){
        // console.log(name);
        this.$emit("searchword",name);
        this.$router.push({ path: '/search', query: { word: name }});
    },
    onClickLeft(){
      this.$router.go(-1)
    },
    onClickRight(){
      console.log(2);
    },

  }
}
</script>
<style lang="less">
.menuNav{
    .van-nav-bar{
        .van-icon,.van-nav-bar__text{
            color: black;
        }
        
        
        .van-nav-bar__content{
            height: 70px;
            .van-nav-bar__title{
                margin-left: 100px;
                font-size: 20px;
            }
        }
    }
}
    .scorll{
        height: calc(100vh - 70px);
        width: 100%;
        position: fixed;
        top: 70px;
        overflow-y: auto;
        .van-index-bar{
            position: absolute;
            left: 27vw;
            .van-index-bar__sidebar{
                color: #a9a9a9;
                background-color: #fafafa;
                // height: 100%;
                width: 25vw;
                top: 70px;
                right: 100%; 
                transform: translateX(100%);      
                white-space: nowrap; 
                .van-index-bar__index{
                    height: 50px;
                    line-height: 50px;
                    padding: 0;
                }
                .van-index-bar__index--active{
                    font-size: 20px;
                    font-weight: 600;
                    background-color: white;
                    position: relative;
                    &::after{
                        content: '';
                        display: inline-block;
                        height: 40%;
                        width:4px;
                        border-radius: 10px;
                        background-color: orange;
                        position: absolute;
                        right: 0;
                        top: 30%;
                    }
                }
            }
            .van-index-anchor{
                display: flex;
                align-items: center;
                // float: right;
                &::before{
                    content: '';
                    height: 3px;
                    width: 3px;
                    background-color: orange;
                    display: inline-block;
                    margin-right: 10px;
                    border-radius: 50%;
                    box-shadow: 0 0 3px 2px orange;
                    // transform: scale(2);
                }
                height: 50px;
                line-height: 50px;
                font-size: 18px;
                font-weight: 600;
            }
            .cell{
                display: flex;
                flex-wrap: wrap;
                // margin-left: 5px;
                .button{
                    // flex-basis: calc(100vw/3 - 50px);
                    width: calc(73vw/3);;
                    // flex-grow: 1;
                    // display: inline-block;
                    height: 55px;
                    // background-color: pink;
                    display: flex;
                    align-items: center;
                    // justify-content: center;
                    .van-cell{
                        // background-color: pink;
                        height: 87%;
                        width: 93%;
                        background-color: #fafafa;
                        border-radius: 5px;
                        padding: 0;
                        .van-cell__title{
                            text-align: center;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            
                        }
                    }
                }
            }
        }
    }
    
</style>